<template>
  <view class="home-bg">
    <!-- 顶部Banner -->
    <view class="banner">
      <image src="/static/banner.png" mode="aspectFill" class="banner-img"></image>
    </view>

    <!-- 用户信息卡片 -->
    <view class="user-card">
      <image class="avatar" src="/static/logo.png" mode="aspectFill"></image>
      <view class="user-info">
        <view class="user-name">Hi，放羊的星星</view>
        <view class="user-balance">余额：3600元</view>
      </view>
      <view class="coupon-btn">16张优惠券</view>
    </view>

    <!-- 活动横幅 -->
    <view class="promo-bar">
      <view class="promo-text">夏季清凉优惠来袭</view>
      <view class="promo-btn">立即领取</view>
    </view>

    <!-- 功能入口 -->
    <view class="entry-row">
      <view class="entry-item" @tap="goPage('dine-in')">
        <image class="entry-icon" src="/static/dinein.png"></image>
        <view class="entry-title">门店堂食</view>
        <view class="entry-desc">扫码点餐</view>
      </view>
      <view class="entry-item" @tap="goPage('member-recharge')">
        <image class="entry-icon" src="/static/vip.png"></image>
        <view class="entry-title">会员充值</view>
        <view class="entry-desc">充值享优惠</view>
      </view>
      <view class="entry-item" @tap="goPage('takeout')">
        <image class="entry-icon" src="/static/takeout.png"></image>
        <view class="entry-title">外卖配送</view>
        <view class="entry-desc">送餐到家</view>
      </view>
    </view>

    <!-- 积分商城入口 -->
    <view class="mall-bar" @tap="goPage('points-mall')">
      <image class="mall-icon" src="/static/integral.png"></image>
      <view class="mall-title">积分商城</view>
      <view class="mall-more">兑好礼 &gt;</view>
    </view>

    <!-- 本周畅销榜 -->
    <view class="hot-title">本周畅销榜</view>
    <scroll-view scroll-x class="hot-list">
      <view class="hot-item" v-for="item in hotList" :key="item.id">
        <image :src="item.img" mode="aspectFill" class="hot-img"></image>
        <view class="hot-name">{{item.name}}</view>
        <view class="hot-desc">{{item.desc}}</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      hotList: [
        { id: 1, name: '抹茶拿铁', desc: '热销223杯', img: '/static/logo.png' },
        { id: 2, name: '芒果冰沙', desc: '热销180杯', img: '/static/logo.png' },
        { id: 3, name: '柠檬水', desc: '热销150杯', img: '/static/logo.png' }
      ]
    }
  },
  methods: {
    goPage(page) {
      uni.navigateTo({ url: `/pages/${page}/index` });
    }
  }
}
</script>

<style scoped>
.home-bg {
  min-height: 100vh;
  background: linear-gradient(180deg, #e8f5e9 0%, #fff 100%);
  padding-bottom: 120rpx;
}
.banner {
  width: 100%;
  height: 260rpx;
  border-radius: 0 0 32rpx 32rpx;
  overflow: hidden;
}
.banner-img {
  width: 100%;
  height: 260rpx;
  object-fit: cover;
}
.user-card {
  margin: -60rpx 24rpx 0 24rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx #e0e0e0;
  display: flex;
  align-items: center;
  padding: 24rpx 24rpx 24rpx 24rpx;
  position: relative;
  z-index: 2;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.user-info {
  flex: 1;
}
.user-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.user-balance {
  color: #888;
  font-size: 26rpx;
}
.coupon-btn {
  background: #39b54a;
  color: #fff;
  border-radius: 32rpx;
  padding: 12rpx 28rpx;
  font-size: 24rpx;
  margin-left: 16rpx;
}
.promo-bar {
  margin: 32rpx 24rpx 0 24rpx;
  background: linear-gradient(90deg, #b2f2bb 0%, #69f0ae 100%);
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18rpx 28rpx;
}
.promo-text {
  color: #388e3c;
  font-size: 28rpx;
  font-weight: bold;
}
.promo-btn {
  color: #39b54a;
  background: #fff;
  border-radius: 32rpx;
  padding: 8rpx 24rpx;
  font-size: 24rpx;
  box-shadow: 0 2rpx 8rpx #e0e0e0;
}
.entry-row {
  margin: 32rpx 24rpx 0 24rpx;
  display: flex;
  justify-content: space-between;
}
.entry-item {
  flex: 1;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 8rpx #e0e0e0;
  margin: 0 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 0;
}
.entry-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 12rpx;
}
.entry-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #388e3c;
}
.entry-desc {
  font-size: 22rpx;
  color: #888;
  margin-top: 4rpx;
}
.mall-bar {
  margin: 32rpx 24rpx 0 24rpx;
  background: #fffbe7;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  padding: 18rpx 28rpx;
  box-shadow: 0 2rpx 8rpx #f5e9c6;
}
.mall-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
}
.mall-title {
  font-size: 28rpx;
  color: #ff9800;
  font-weight: bold;
  flex: 1;
}
.mall-more {
  color: #888;
  font-size: 24rpx;
}
.hot-title {
  margin: 40rpx 24rpx 0 24rpx;
  font-size: 28rpx;
  color: #388e3c;
  font-weight: bold;
}
.hot-list {
  display: flex;
  flex-direction: row;
  padding: 16rpx 0 16rpx 24rpx;
  white-space: nowrap;
}
.hot-item {
  display: inline-block;
  width: 160rpx;
  margin-right: 16rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx #eee;
  padding: 16rpx;
  text-align: center;
}
.hot-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  margin-bottom: 8rpx;
}
.hot-name {
  font-weight: bold;
  margin-bottom: 4rpx;
}
.hot-desc {
  font-size: 22rpx;
  color: #39b54a;
}
</style>
